<template>
  <el-card>
    <h3>统计报表</h3>
    <el-form
      :model="form"
      size="medium"
      label-position="left"
      label-width="150px"
    >
      <el-form-item label="选择检测项">
        <el-select
          placeholder="项目信息列表"
          v-model="form.monitorId"
          clearable
          @change="selectChange"
          style="display: flex"
        >
          <el-option
            v-for="(item, index) in monitorList"
            :key="index"
            :label="item.monitorName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报表发送邮箱">
        <el-input
          placeholder="请输入收件人邮箱"
          v-model="form.reportEmail"
        ></el-input>
      </el-form-item>
      <el-form-item label="报表标题">
        <el-input
          placeholder="请输入报表标题"
          v-model="form.reportTitle"
        ></el-input>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-input
          placeholder="请输入项目名称"
          v-model="form.projectName"
        ></el-input>
      </el-form-item>
      <el-form-item label="项目来源">
        <el-input
          placeholder="请输入项目来源"
          v-model="form.projectSource"
        ></el-input>
      </el-form-item>
      <el-form-item label="项目周期">
        <el-input
          placeholder="请输入项目周期"
          v-model="form.projectCycle"
        ></el-input>
      </el-form-item>
      <el-form-item label="施工日期">
        <el-date-picker
          placeholder="请输入施工日期"
          v-model="form.projectDate"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="监测起始日期">
        <el-date-picker
          placeholder="请输入监测开始日期"
          v-model="form.monitorStartDate"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="建设单位">
        <el-input
          placeholder="请输入建设单位"
          v-model="form.projectEmployer"
        ></el-input>
      </el-form-item>
      <el-form-item label="实施单位">
        <el-input
          placeholder="请输入实施单位"
          v-model="form.construcUnit"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮件标题">
        <el-input
          type="textarea"
          placeholder="请输入邮件标题内容"
          v-model="form.emailTitle"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮件正文内容">
        <el-input
          type="textarea"
          placeholder="请输入邮件正文内容"
          v-model="form.emailContent"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="save">保存</el-button>
        <el-button @click="empty">清空</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import * as serviceApi from "../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "StatisticalReport",
  data() {
    return {
      monitorList: null,
      form: {
        monitorId: "",
        reportEmail: "",
        reportTitle: "",
        projectName: "",
        projectSource: "",
        projectDate: "",
        monitorStartDate: "",
        monitorEndDate: "",
        projectCycle: "",
        projectEmployer: "",
        construcUnit: "",
        monitorUnit: "",
        emailTitle: "",
        emailContent: "",
      },
    };
  },
  methods: {
    selectChange(value) {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"monitorId\\":\\"${value}\\"}","serviceCode":"queryXNReportInfo","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.form = res.data.parameter.xNReportPartInfoDmo;
      });
    },
    empty() {
      this.form = {
        monitorId: "",
        reportEmail: "",
        reportTitle: "",
        projectName: "",
        projectSource: "",
        projectDate: "",
        monitorStartDate: "",
        monitorEndDate: "",
        projectCycle: "",
        projectEmployer: "",
        construcUnit: "",
        monitorUnit: "",
        emailTitle: "",
        emailContent: "",
      };
    },
    save() {
      let queryData = {
        monitorId: this.form.monitorId,
        reportEmail: this.form.reportEmail,
        reportTitle: this.form.reportTitle,
        projectName: this.form.projectName,
        projectSource: this.form.projectSource,
        projectDate: moment(this.form.projectDate).format("YYYY-MM-DD"),
        monitorStartDate: moment(this.form.monitorStartDate).format(
          "YYYY-MM-DD"
        ),
        monitorEndDate: this.form.monitorEndDate,
        projectCycle: this.form.projectCycle,
        projectEmployer: this.form.projectEmployer,
        construcUnit: this.form.construcUnit,
        monitorUnit: this.form.monitorUnit,
        emailTitle: this.form.emailTitle,
        emailContent: this.form.emailContent,
      };
      if (queryData.monitorId != "") {
        Axios({
          url: serviceApi.KB_API,
          method: "post",
          data: `appMsg={"parameter":"{\\"monitorId\\":\\"${queryData.monitorId}\\",\\"reportEmail\\":\\"${queryData.reportEmail}\\",\\"reportTitle\\":\\"${queryData.reportTitle}\\",\\"projectName\\":\\"${queryData.projectName}\\",\\"projectSource\\":\\"${queryData.projectSource}\\",\\"projectDate\\":\\"${queryData.projectDate}\\",\\"monitorStartDate\\":\\"${queryData.monitorStartDate}\\",\\"projectCycle\\":\\"${queryData.projectCycle}\\",\\"projectEmployer\\":\\"${queryData.projectEmployer}\\",\\"construcUnit\\":\\"${queryData.construcUnit}\\",\\"emailTitle\\":\\"${queryData.emailTitle}\\",\\"emailContent\\":\\"${queryData.emailContent}\\"}","serviceCode":"saveXNReport","timestamp":"","uuid":""}`,
        }).then((res) => {
          let message = res.data.parameter.message;
          this.$message({
            message: message,
            type: "success",
            duration: 1000,
          });
        });
      }
    },
  },
  created() {
    Axios({
      url: serviceApi.KB_API,
      method: "post",
      data: `appMsg={"parameter":"{\\"moduleEnum\\":\\"\\"}","serviceCode":"listXNReportMonitor","timestamp":"","uuid":""}`,
    }).then((res) => {
      this.monitorList = res.data.parameter.list;
    });
  },
};
</script>

<style lang="less" scoped>
h3 {
  text-align: center;
  font-size: 25px;
  margin-bottom: 20px;
  font-weight: 400;
}
</style>